<template>
  <view class="container">
    <view class="title">作业题目</view>
    <!-- 问题 -->
    <view class="question">{{ obj.content }}</view>
    <view class="img" v-if="obj.pic != ''">
      <image :src="imgUrl + obj.pic" mode="aspectFill" @click="previewimg(imgUrl + obj.pic)"></image>
    </view>

    <!-- 输入的答案 -->
    <textarea class="content" v-model="obj.user_content" maxlength="-1" disabled></textarea>
    <!-- 图片上传答案 -->
    <view class="imgbox" v-if="obj.user_pic.length != 0">
      <image
        :src="imgUrl + item"
        v-for="(item, index) in obj.user_pic"
        :key="index"
        mode="aspectFill"
        style="width: 220rpx; height: 220rpx"
        @click="previewimg(imgUrl + item)"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 0,
      imagelist: [],
      content: '',
      obj: {},
      imgUrl: ''
    };
  },
  methods: {
    // 放大预览图片
    previewimg(img) {
      uni.previewImage({
        current: 0,
        urls: img.split(',')
      });
    },
    async getdetial(id) {
      const res = await uni.$http.post('/homework/details', {
        homework_id: id
      });
      console.log('获取作业详情', res);
      this.obj = res.data.data;
      this.obj.user_pic = this.obj.user_pic.split(',');
    }
  },
  onLoad(e) {
    this.imgUrl = this.imgurl;
    if (e.id) {
      console.log(e.id);
      this.getdetial(e.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 30rpx;
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }
  .img {
    width: 690rpx;
    height: 280rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .question {
    box-sizing: border-box;
    width: 690rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }
  .content {
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    padding: 30rpx;
    margin-top: 15rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
  }
  .imgbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20rpx;
  }
}
</style>
